<template>
  <!-- 利用获取到的数据进行操作，编辑部门是有id的但是新增部门没有，所以就使用三元表达式判断哪 -->
  <el-dialog
    :title="form.id ? '编辑部门' : '新增部门'"
    :visible="addShow"
    @close="canael"
  >
    <el-form :model="form" label-width="180px" :rules="rules" ref="myform">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="form.code"
          autocomplete="off"
        ></el-input> </el-form-item
      ><el-form-item label="部门负责人名称" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择">
          <el-option
            v-for="(item, index) in managerList"
            :key="index"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select> </el-form-item
      ><el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="canael">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入获取部门全部数据做自定义校验规则
import {
  getDepListApi,
  addDeptListApi,
  getDeptDetailApi,
  updateDeptApi,
} from "@/api/departments";

// 导入员工简单列表接口
import { getSimpleListApi } from "@/api/employess";
export default {
  // addShow向父组件要的数据来控制面板的显示与隐藏
  // 接收到父级组件传过来的id
  props: ["addShow", "pid"],
  data() {
    return {
      form: {
        code: "", //部门编码
        introduce: "", //部门介绍
        manager: "", //部门负责人名称
        name: "", //部门名称
        pid: "", //父级部门id
      },

      // 设置表单验证规则
      rules: {
        // 部门名称验证
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          { mia: 1, max: 50, message: "请输入1~50个字符", trigger: "blur" },
          // 定义一个自定义校验规则
          {
            // value是校验的内容，callback是一个回调函数
            validator: async (rules, value, callback) => {
              // 先获取到所有的部门数据
              let res = await getDepListApi();
              if (!this.form.id) {
                res.data.data.depts.some((item) => {
                  // 返回输入的内容有没有和每一项的内容相同,和判断每一项的pid等于传过来的父级id
                  return item.name === value && item.pid === this.pid;
                }) // 为true就证明有返回报错信息，没有就直接执行callback
                  ? callback(new Error("同级部门有冲突"))
                  : callback();
              } else {
                // 获取数据到的数据检测相同的元素
                res.data.data.depts.some((item) => {
                  return (
                    //得到的每一项的名字等于输入的名字
                    item.name === value &&
                    // 每一项的pid等于form对象中的pid
                    item.pid === this.form.pid &&
                    // 每一项的id不等于form对象的的id
                    item.id !== this.form.id
                  );
                })
                  ? // 如果这个值为true证明取名不合法有冲突
                    callback(new Error("名称不合法"))
                  : // 为false则不理执行回调函数就行
                    callback();
              }
            },
          },
        ],
        // 部门编码
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          { mia: 1, max: 50, message: "请输入1~50个字符", trigger: "blur" },
          // 自定义校验规则
          {
            validator: async (rulse, value, callback) => {
              // 先获取到所有的部门数据
              let res = await getDepListApi();
              // 判断form对象中的id取反，就是没有那就是新增部门的校验
              if (!this.form.id) {
                // 进行校验遍历
                res.data.data.depts.some((item) => {
                  // 返回部门数据的每一项code编码等于我输入的内容
                  return item.code === value;
                }) // 为true就证明有返回报错信息，没有就直接执行callback
                  ? callback(new Error("编码有相同的了哦"))
                  : callback();
                // 否则就是编辑部门的校验
              } else {
                // 把得到的数据使用some方法检验相同符合的元素
                res.data.data.depts.some((item) => {
                  // 返回每一项的code等于value 和 每一项的id不等于form对象中的id也就是除自己以外的
                  return item.code === value && item.id !== this.form.id;
                })
                  ? // 进行三元表达式验证
                    callback(new Error("编码有相同的了"))
                  : callback();
              }
            },
          },
        ],
        // 部门负责人
        manager: [
          { required: true, message: "请输入部门负责人姓名", trigger: "blur" },
        ],
        // 部门介绍
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          { mia: 1, max: 300, message: "请输入1~300个字符", trigger: "blur" },
        ],
      },

      // 定义一个保存员工名字数组
      managerList: [],
    };
  },

  // 声明一个事件
  methods: {
    // 给确定按钮设置点击事件
    submit() {
      // 进行全局表单验证
      this.$refs.myform.validate(async (valid) => {
        // 为true验证通过
        if (valid) {
          //用id来判断是修改部门还是新增部门
          if (!this.form.id) {
            //发送请求;，为一个对象，pid得从新赋值为父组件中传过来的id
            await addDeptListApi({
              ...this.form,
              // 添加一级部门，判断如果pid等于604e115c7bfcfa45d019d3e9就让他为空成为一级部门，如果不等于就执行this.pid就不是一级部门
              pid: this.pid==='604e115c7bfcfa45d019d3e9'? '':this.pid
            });
          } else {
            // 发送网络请求
            await updateDeptApi(this.form);
          }
          // 因为编辑的逻辑代码和新增的一样所以写到他们的外面，不管谁都会触发一下代码
          // 关闭页面
          this.$emit("update:addShow", false);
          // 提示新增成功-----(这里的修改和新增的文本就使用三元表达式来操作，存在id就是编辑，相反就是新增)
          this.$message.success(this.form.id?'修改成功':'新增成功');
          // 刷新页面数据
          this.$emit("refurbish");
          // 清除表单数据
          this.form = {
            code: "", //部门编码
            introduce: "", //部门介绍
            manager: "", //部门负责人名称
            name: "", //部门名称
            pid: "", //父级部门id
          };
        } else {
          this.$message.error("验证失败");
        }
      });
    },

    // 给取消按钮设置点击事件
    canael() {
      // 修改父组件中的数据
      this.$emit("update:addShow", false);
      // 对表单验证规则进行重置
      this.$refs.myform.resetFields();
      // 清除表单数据
      this.form = {
        code: "", //部门编码
        introduce: "", //部门介绍
        manager: "", //部门负责人名称
        name: "", //部门名称
        pid: "", //父级部门id
      };
    },

    // 声明一个方法用来获取员工简单列表
    async getDepList() {
      // 发送请求
      const res = await getSimpleListApi();
      // 保存到数组中
      this.managerList = res.data.data;
    },

    // 定义一个方法用来根据id获取信息
    async getDeptDetail(id) {
      const res = await getDeptDetailApi(id);
      console.log(res);
      this.form = res.data.data;
    },
  },

  // 页面一打开就显示
  created() {
    // 调用获取员工简单数据
    this.getDepList();
  },
};
</script>

<style></style>
